<template>
  <section>
    <div>
      <span>目标筛选</span>
      <a-radio-group v-model:value="filterData.targetFilter" @change="handleChange">
        <a-radio-button v-for="target in targetFilterMap" :key="target.value" :value="target.value">
          {{ target.label }}
        </a-radio-button>
      </a-radio-group>
    </div>
    <div>
      <span>目标类型</span>
      <a-select v-model:value="filterData.targetType" @change="handleChange" style="width: 120px">
        <a-select-option v-for="item in targetTypeMap" :key="item.value" :value="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
    </div>
    <div>
      <span>国别</span>
      <a-select v-model:value="filterData.national" @change="handleChange" style="width: 120px">
        <a-select-option v-for="item in nationalMap" :key="item.value" :value="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
    </div>
  </section>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'
  import { targetFilterMap, targetTypeMap, nationalMap } from './indexConfig'

  type TargetFilter = 'all_target' | 'air_target' | 'sea_target'

  export interface FilterData {
    targetFilter: TargetFilter
    targetType: string
    national: string
  }

  const filterData = reactive<FilterData>({
    targetFilter: 'all_target',
    targetType: '',
    national: ''
  })

  const emit = defineEmits(['handle-change'])

  const handleChange = () => {
    emit('handle-change', filterData)
  }

  defineExpose({ filterData })
</script>

<style lang="less" scoped>
  section {
    display: flex;
    column-gap: 6px;
    padding: 8px 10px;
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(3px);
    border-radius: 4px;
    border: 1px solid #eee;
    span {
      margin-right: 4px;
    }
  }
</style>
